<!-- 健康史 -->
<template>
    <div class="healthhistory-container">

        <!-- 健康史包裹层 -->
        <div class="healthhistory-item-container">
                <van-cell-group class="item-content">
                    <!-- 开始时间 -->
                    <van-field readonly is-link v-model="item.vdo02" label="开始时间" placeholder="请选择开始时间" @click="item.itemcontrol.isTimeStartShow = true" />
                    <!-- 结束时间 -->
                    <van-field readonly is-link v-model="item.vdo03" label="结束时间" placeholder="请选择结束时间" @click="item.itemcontrol.isTimeEndShow = true" />
                    <!-- 工作单位 -->
                    <van-field v-model="item.vdo04" label="工作单位" placeholder="请输入工作单位"/>
                    <!-- 职业代码 -->
                    <van-field readonly is-link v-model="item.vdo11Text" label="职业代码" placeholder="请选择职业代码" @click="item.itemcontrol.isCareeCodeShow = true" />
                    <van-row class="item-nowarp">
                      <van-col span="12">
                        <!-- 部门 -->
                        <van-field v-model="item.vdo05" label="部门" placeholder="请输入部门" />
                      </van-col>
                      <van-col span="12">
                        <!-- 工种 -->
                        <van-field v-model="item.vdo06" label="工种" placeholder="请输入工种" />
                      </van-col>
                    </van-row>
                    <!-- 放射射线种类 -->
                    <van-field v-model="item.vdo07" label="放射射线种类" placeholder="请输入放射射线种类"  />
                    <!-- 工作量日/时 -->
                    <van-field v-model="item.vdo08" label="工作量日/时" placeholder="请输入每日工作量日/时"  />
                    <!-- 累计受照剂量 -->
                    <van-field v-model="item.vdo09" label="累计受照剂量" placeholder="请输入累计受照剂量"  />
                    <!-- 过量照射史 -->
                    <van-field v-model="item.vdo10" label="过量照射史" placeholder="请输入过量照射史"  />
                </van-cell-group>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, toRefs } from 'vue';
import { showConfirmDialog, showToast } from 'vant';
import { onMounted } from 'vue';

    // 元素挂载后执行
    onMounted(() => {
        
    });

    // 单条放射职业史数据
    const healthhistoryData = reactive(
            {
                vdo02: '', //开始时间
                vdo03: '', //结束时间
                vdo04: '', //工作单位
                vdo11: '', //职业代码code

            });

</script>

<style scoped>

    .healthhistory-container {
        
        .radiological-item {

            margin: 20px 18px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: -2px 8px 18px #ddd;

            .item-title {
                background-color: #e1f2f9;
                display: flex;
                align-items: center;
                padding: 5px 20px;
                justify-content: space-between;

                .title-text {
                 font-size: 28px;
                 color:rgb(62, 175, 224);
                 font-weight: 700;
                }

                .delete-box {
                    /* background-color: red; */
                    border-radius: 20px 0 0 0;
                    height: 100%;
                    text-align: center;
                    line-height: 50px;
                    font-size: 35px;
                    font-weight: 700;
                    color: #fff;
                }
            }

            .item-content {
                .item-nowarp :deep(.van-field__label) {
                width: unset;
            }
            }
        
        }

        .radiological-contorl-btns {
            margin-top: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            color: #ddd;
            font-size: 60px;
        }
    }

</style>